<template>
    <div>
        <ul class="playList flex flex-wrap justify-between">
            <!-- 此处需要../ 因为上一次路由路径为 top/playList ，而当前路由为detail 点击时就会被解析为 top/detail -->
            <router-link :to="'../playlist/detail?id='+item.id" tag="li" v-for="(item, index) in playlist" :key="index" :data-id='item.id'>
                <img v-lazy="item.coverImgUrl" alt="">
                <h3>{{item.name}}</h3>
                <div>播放次数{{item.playCount}}</div>
            </router-link>
        </ul>
    </div>
</template>
<script>
import request from '../../network/request'
export default {
    name:'',
    data() {
        return {
            playlist:null
        }
    },
    inject:['changeLoading'],//接收home里面加载动画的状态
    props:['url','offset','order'],//列表页需要翻页 所以 要在playlist 传递props，首页不需要点击分类按钮， 获取不到路由，只能传递固定url
    mounted(){
        this.getPlayList()
    },
    beforeRouteEnter (to, from, next) {//不起作用，没挂载在router.js 里面的组件如果需要监听路由的话，用watch 监听 $ route 就行了。
        console.log('修改标题');
    },
    watch:{
        // offset(){//列表页 点击翻页时 监听此数据变化 就调用请求 新数据
        //     this.getPlayList()
        // },
        offset:{//等同于上面
            handler:'getPlayList',
            immediate:true//立即更新
        },
        order(){//改变类型 最新 | 最热
            this.getPlayList()
        },
        '$route':function(to, from,next) {
            console.log('路由发生');
            next()
        }
    },
    methods:{
        requestPlayList(){
            var path=this.url||this.$route.path// 首页不需要点击分类按钮， 获取不到路由，只能传递固定url
            var cat=this.$route.query.cat
            return request({url:path,params: {
                cat:cat,
                offset: this.offset||0,// 组件加载时 第一次默认请求第一页数据 
                order: this.order||'hot'
            }})
            .then(res=>{
                
                // 改变home里面加载动画的状态
                this.changeLoading(false)

                if(res.data.playlists.length<1){
                    alert('没有数据')
                }
                return res.data.playlists.slice(0,36)//每行6个 共6行
                
            })
        },
        getPlayList(){
            if(this.$route.path=='/home'){
                if(!this.$store.state.homePlayList){//首页第一次没有时 添加数据到仓库
                    this.requestPlayList().then(res=>{
                        this.$store.commit('setPlayList',{homePlayList:res})
                        this.playlist=this.$store.state.homePlayList//以后每次从仓库取
                    })
                }
                this.playlist=this.$store.state.homePlayList//以后每次从仓库取
                // 改变home里面加载动画的状态
                this.changeLoading(false)
            }else{
                this.requestPlayList().then(res=>{
                    this.$store.commit('setPlayList',{topPlayList:res})
                    this.playlist=this.$store.state.topPlayList//以后每次从仓库取
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .playList{
            /* 使用伪元素辅助左对齐 */
            // &::after {
            //     content: '';
            //     flex: 0.93;    /* 或者flex: 1 */
            // }
            li{
                width: 160px;
                height: 220px;
                margin-bottom: 10px;
                h3{
                    font-weight: normal;
                }
                img{
                    width: 100%;
                }
            }
        }
</style>